<template>
  <div class="container">
    <!-- <h1>数据加载器</h1> -->
    <el-space direction="vertical" alignment="start" :size="0">
      <el-space alignment="start" :size="26">
        <el-space direction="vertical" alignment="start" :size="26">
          <RealDataLoader />
          <HistoryLoader />
        </el-space>
        <FakeDataLoader />
      </el-space>
      <ManualDataLoader />
    </el-space>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import RealDataLoader from "./RealDataLoader.vue";
import FakeDataLoader from "./FakeDataLoader.vue";
import HistoryLoader from "./HistoryLoader.vue";
import ManualDataLoader from "./ManualDataLoader.vue";

const currentMode = ref("RealData");
</script>

<style scoped>
.container {
  display: flex;
  align-items: top;
  justify-content: center;
  /* width: 100%; */
  /* height: calc(100vh - 120px); */
  padding: 48px 12px;
}
</style>
